<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吉大树洞 - 用户注册</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="background"></div>
    <div class="container">
        <div class="form-container">
            <h1>用户注册</h1>
            <form id="registerForm">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" required>

                <label for="password">密码:</label>
                <input type="password" id="password" name="password" required>

                <label for="email">电子邮件:</label>
                <input type="email" id="email" name="email" required>

                <label for="age">年龄:</label>
                <input type="number" id="age" name="age" required>

                <label for="gender">性别:</label>
                <select id="gender" name="gender">
                    <option value="male">男</option>
                    <option value="female">女</option>
                    <option value="other">其他</option>
                </select>

                <label for="birthday">生日:</label>
                <input type="date" id="birthday" name="birthday" required>

                <label for="college">学院:</label>
                <select id="college" name="college" required>
                    <option value="computer">计算机学院</option>
                    <option value="engineering">工程学院</option>
                    <option value="business">商学院</option>
                    <option value="law">法学院</option>
                    <option value="medicine">医学院</option>
                    <option value="arts">艺术学院</option>
                </select>

                <label for="bio">个人简介:</label>
                <textarea id="bio" name="bio" rows="4"></textarea>

                <button type="submit">注册</button>
            </form>
            <p>已有账号？<a href="login.html">登录</a></p>
        </div>
    </div>

    <script>
        // 注册逻辑
        document.getElementById('registerForm').addEventListener('submit', function (event) {
            event.preventDefault(); // 阻止表单默认提交行为

            // 获取用户输入
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const email = document.getElementById('email').value;
            const age = document.getElementById('age').value;
            const gender = document.getElementById('gender').value;
            const birthday = document.getElementById('birthday').value;
            const college = document.getElementById('college').value;
            const bio = document.getElementById('bio').value;

            // 将用户信息存储到 localStorage
            const user = {
                username,
                password,
                email,
                age,
                gender,
                birthday,
                college,
                bio
            };
            localStorage.setItem(username, JSON.stringify(user));

            alert('注册成功！');
            window.location.href = 'login.html'; // 跳转到登录页面
        });
    </script>
</body>
</html>